<template>
    <div style="margin:2vmax">
        <el-row :gutter="20">

            <el-col :span="21">
                <div class="ar_title" style="margin-bottom: 1vmax">我的任务</div>
                <el-row :gutter="20" class="task_title">
                    <el-col :span="6">
                        <div class="task_title_item" style="background-color:#e3bf95; ">
                            <i class="el-icon-document"></i>
                            <div class="task_title_item_t">
                                <p>淘宝任务(进行中)</p>
                                <p>单</p>
                            </div>
                            <router-link to="/task/index">
                                <div class="task_title_item_i">
                                    <span>查看任务</span>
                                    <i class="el-icon-arrow-right" style="font-size: 1vmax;margin-top: 8px"></i>
                                </div>
                            </router-link>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="task_title_item" style="background-color:#f0aa8b;">
                            <i class="el-icon-document"></i>
                            <div class="task_title_item_t">
                                <p>淘宝任务(进行中)</p>
                                <p>单</p>
                            </div>
                            <router-link to="/task/index">
                                <div class="task_title_item_i">
                                    <span>查看任务</span>
                                    <i class="el-icon-arrow-right" style="font-size: 1vmax;margin-top: 8px"></i>
                                </div>
                            </router-link>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="task_title_item" style="background-color:#95b9e3">
                            <i class="el-icon-document"></i>
                            <div class="task_title_item_t">
                                <p>淘宝任务(进行中)</p>
                                <p>单</p>
                            </div>
                            <router-link to="/task/index">
                                <div class="task_title_item_i">
                                    <span>查看任务</span>
                                    <i class="el-icon-arrow-right" style="font-size: 1vmax;margin-top: 8px"></i>
                                </div>
                            </router-link>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="task_title_item" style="background-color:#95e3c3;">
                            <i class="el-icon-document"></i>
                            <div class="task_title_item_t">
                                <p>淘宝任务(进行中）</p>
                                <p>单</p>
                            </div>
                            <router-link to="/task/index">
                                <div class="task_title_item_i">
                                    <span>查看任务</span>
                                    <i class="el-icon-arrow-right" style="font-size: 1vmax;margin-top: 8px"></i>
                                </div>
                            </router-link>
                        </div>
                    </el-col>
                    <!--账户信息-->
                    <el-col :span="24" class="middle">
                        <div class="ar_title">账户信息</div>
                        <el-row :gutter="20" style="margin-top: 1vmax ">
                            <el-col :span="12">
                                <div class="userInfo">
                                    <el-row class="row_top">
                                        <el-col :span="6">
                                            <el-col :span="24" ><img class="p1" src='http://www.wandoull.com/static/img/headerImg/header_02.png' alt="" width="100px"></el-col>
                                            <el-col :span="24" style="text-align: center"> {{all.phone}}</el-col>
                                            <el-col :span="24" style="text-align: center"><b style="font-size: 20px">普通</b>会员</el-col>
                                        </el-col>
                                        <el-col :span="18" class="text1">
                                            <el-col :span="24" class="text">
                                                <el-col :span="18">可用流量币：1111</el-col>
                                                <el-col :span="6">
                                                    <el-col :span="24">
                                                        <el-button round size="mini"><router-link to="pay/index">充值</router-link></el-button>
                                                    </el-col>
                                                </el-col>
                                            </el-col>
                                            <el-col :span="24" class="text">
                                                <el-col :span="18">推广佣金：{{all.brokerage_price}}</el-col>
                                                <el-col :span="6">
                                                    <el-col :span="24">
                                                        <router-link to="/withdraw"><el-button round size="mini">提现</el-button></router-link>
                                                    </el-col>
                                                </el-col>
                                            </el-col>
                                            <el-col :span="24" class="text">
                                                <el-col :span="18" class="text1">推广连接：http://www.wandoull.com/?tg=wW8hp4Tg</el-col>
                                                <el-col :span="6">
                                                    <el-col :span="24">
                                                        <el-button round size="mini" @click="copyLink" class="tag-read"
                                                                   data-clipboard-text="http://www.wandoull.com/?tg=wW8hp4Tg">复制</el-button>
                                                    </el-col>
                                                </el-col>
                                            </el-col>
                                            <el-col :span="24" class="text">
                                                <el-col :span="18">QQ号码：22548221552</el-col>
                                                <el-col :span="6">
                                                    <el-col :span="24">
                                                        <el-button round size="mini">修改</el-button>
                                                    </el-col>
                                                </el-col>
                                            </el-col>
                                        </el-col>
                                    </el-row cl>
                                    <el-row>
                                        <el-col :span="24" style="line-height: 4.5vmin;color: #999; text-align: left ;padding: 1vmin 1vmax" >
                                            超给力的推广好友系统永久获取高佣金提成<br>
                                            别人通过推广链接注册的自动成为您的推广的好友！<br>
                                            好友每次充值您将获得高达8%佣金（详情推广奖励点击查看）<br>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="12" class="carousel">
                                <el-carousel height="16vmax" trigger="click" >
                                    <el-carousel-item v-for="item in ad" :key="item.advertising_id">
                                        <img :src="item.advertising_img" class="image" style="width: 100%;height: 100%" >
                                    </el-carousel-item>
                                </el-carousel>
                            </el-col>
                        </el-row>
                    </el-col>
                    <!--账户信息-->

                    <!--视频教程-->

                    <el-col :span="24"  v-for="item in video" :key="item.category_id">
                        <div class="ar_title" style="margin-top: 3vmax;margin-bottom: -1vmax">{{item.category_title}}</div>
                        <el-row :gutter="20"  class="video" style="    margin-top: 5px;" >
                            <el-col :span="6"  v-for="(vd,index) in item['video']"  :key=" item['video'].video_id " >
                                <div>
                                    <p >{{vd.video_title}}</p>
                                    <video controls  class="video-w">
                                        <source :src ='vd.video_path' type="video/mp4"/>
                                    </video>
                                    <p >{{vd.video_desc}}</p>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <!--视频教程-->

                </el-row>
            </el-col>
            <el-col :span="3">
                <el-row class="gonggao">
                    <el-col :span="24" v-for="item in article" :key="item.category_id">
                        <div class="ar_title">{{item.category_title}}</div>
                        <div class="ar">
                            <router-link to="/zixun" v-for="(ar,index) in item['article']"  :key=" item['article'].article_id"><p>{{index}}.{{ar.article_title}}}</p></router-link>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
  import { get_ad,get_article } from '@/api/app'
  import { get_video } from '../../api/app'
  import { mapGetters } from 'vuex'
  import Clipboard from 'clipboard'

  export default {
    name: 'index',
    data() {
      return {
        path: './static/demo.mp4',
        ad:null,
        article:null,
        video:null

      }
    },
    created(){
      this.fetch_ad()
      this.fetch_article()
      this.fetch_video()
    },
    methods:{
      copyLink () {
        var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {
          this.$message.success('复制成功')
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          this.$message.error('该浏览器不支持复制')
          // 释放内存
          clipboard.destroy()
        })
      },
      fetch_ad() {
        get_ad().then(response => {
          this.ad = response.data
        })
      },
      fetch_article(){
        get_article().then(response => {
          this.article = response.data
        })
      },
      fetch_video(){
        get_video().then(response => {
          this.video = response.data
        }).catch(error => {
          console.log(error)
        })
      }
    },
    computed: {
      ...mapGetters([
        'avater',
        'name',
        'all'

      ])
    }
  }
</script>

<style scoped>
    .text{
        padding: 5px;
        line-height: 32px;
    }
    .p1{display: block;
        border-radius: 50%;
        padding: 5px;
        margin: 0 auto;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .task_title i {
        font-size: 5vmax;
        height: 100%;
    }

    .task_title_item {
        padding-top: 1vmax;
        margin: 0 auto;
        text-align: center;
        color: #ffffff;

    }

    .task_title_item_t {
        font-size: 1vmax;
        display: inline-block;
    }

    .task_title_item_i {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 40px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, .2);
        margin-top: 10px;
        padding: 0 18px;
        width: 100%;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
    }

    .ar_title {
        font-weight: bold;
        color: #666;
        font-size: 1vmax;
    }

    .gonggao > div:not(:first-child) {
        padding-top: 1vmax;
    }

    .ar {
        margin-top: 1vmax;
        color: #666;
        font-size: 0.8vmax;

        border: 1px solid #e4e4e4;
        padding: 0 1vmax;
    }

    .ar p {
        white-space: nowrap;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
    }

    .middle {
        height: 16vmax;
        margin-top: 1vmax;

    }
    .row_top{
        background-color: #1799ea;
    }
    .middle .userInfo {
        height: 16vmax;
        font-size: 1vmax;
        color: white;
    border: 1px solid #e3bf95
    }

    .video div {
        margin-top: 1vmax;
        text-align: center;
        height: 15vmax;
    }

    .video-w {
        width: 100%;
        height: auto;
    }

    .video div > div {
        border: solid #cccccc 1px;
    }

    .text1 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
</style>
